<!--
*- coding = utf-8 -*-
#@Time : 2023/6/19 17:20
#@Author : 管茂良
#@File : index.vue
#@web  : www.php-china.com
#@Software: WebStorm
-->
<template>
  <div class="app-container">
    <view class="userInfoImgStyle">
        <CommonImage style="width:100%;height:100%" mode="widthFix" :picUrl="userInfo.userBgm"/>
    </view>
    <view class="userInfo">
      <view class="u-f u-f-ajs userInfoStyle">
        <view class="u-f">
          <view class="margin-right-10" style="width:75px;height:75px;">
              <CommonImage style="width:100%;height:100%" mode="widthFix" :picUrl="userInfo.headImg"/>
          </view>
          <view>
            <view class="nickName-style" style="color:black;font-size: 36rpx;font-weight: bolder;line-height: 78rpx;">
              {{userInfo.nickName}}
            </view>
            <!--            简介-->
            <view class="intro-style u-f">
              <view>{{userInfo.introduction}}</view>
            </view>
          </view>
        </view>
        <view class="u-f" @click="handleToPage('setting')">
          <view class="u-f u-f-ac u-f-ajc margin-right-5">
            <SvgIcon :size="'15'" :iconClass="'qrcode'" />
          </view>
          <view class="u-f u-f-ac u-f-ajc">
            <SvgIcon :size="'15'" :iconClass="'right'" />
          </view>
        </view>
      </view>
      <view class="userInfoListStyle">
          <CommonList :title="'我的等级'" :icon="'record'" :isShowLineStyle="false">
              <template #rightSlot>
                  <div class="u-f" style="width:60px">
                      <div>⭐</div>
                      <div>🌙</div>
                      <div>👑</div>
                  </div>
              </template>
          </CommonList>
      </view>

      <view class="userInfoListStyle">
        <CommonList :title="'设置'" :icon="'setting'" :isShowLineStyle="false" @click="handleToPage('setting')" />
        <CommonList :title="'关于软件'" :icon="'about'" @click="handleToPage('about')" />
      </view>
      <view class="userInfoListStyle">
        <CommonList style="color:red" :title="'退出'" :icon="'exit'" :rightSlotColor="'red'" :leftIconColor="'red'" :rightSlot="false" :isShowLineStyle="false" @click="handleOut" />
      </view>
    </view>
    <u-modal v-model="isShowModel" :show-title="false" :content="'确定要退出？'" :content-style="{'color':'red'}" showCancelButton confirmText="确定" cancelText="取消" @confirm="handleConfirm" ref="modalRef" @cancel="isShowModel = false" :async-close="true"></u-modal>
  </div>
</template>

<script setup lang="ts">
import CommonImage from "@/components/commonImage/index"
import CommonList from "@/components/commonList/index"
import {ref} from "vue";
import {handlePageTo} from "@/utils/utils";

interface userInfoInterface {
  uid:number//用户id
  nickName:string//用户名称
  headImg:string//头像图片
  introduction:string//简介
  userBgm:string//用户背景图片
}
//用户信息
let userInfo = ref<userInfoInterface>({
  uid:1,
  nickName:"222222",
  headImg:"/static/img/doctor_img01.png",
  introduction:"222222",
  userBgm:"/static/img/bgm.jpg",
})
let isShowModel = ref(false)

//跳转页面
const handleToPage = (pageName:string)=>{
  if(pageName=="about"){
    console.log(333);
    handlePageTo("navigateTo","/pageMe/about/index")
  }else if(pageName=="setting"){
    handlePageTo("navigateTo","/pageCommon/chatInfo/chatSetting/index")
  }
}
//退出页面
const handleOut = ()=>{
  isShowModel.value = true;
}

//确认
const handleConfirm = ()=>{
  console.log(3333);
}

</script>

<style scoped lang="less">
.userInfoImgStyle{
  position: relative;
  height:400rpx;
  width:100%;
}
.userInfo{
  position: absolute;
  top:280rpx;
  let:0rpx;
  z-index: 999;
  width: 100%;
}
.userInfoStyle{
  border-radius: 10rpx;
  margin:0rpx 30rpx 0px 30rpx;
  padding:30rpx 20rpx;
  background:white;
  margin-bottom: 5px;
}
.userInfoListStyle{
  position: relative;
  z-index: 999;
  overflow: hidden;
  border-radius: 10rpx;
  margin:30rpx 30rpx;
  background:white;
}
</style>
